<template>
	<view class="swiper-scrollbar">
		<view class="swiper-scrollbar-track"></view>
		<view class="swiper-scrollbar-thumb" :style="style"></view>
	</view>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps(['index', 'length'])

const style = computed(() => {
	const { index, length } = props
	if(index === 0) {
		return {
			top: '2%'
		}
	} else if (index === length - 1){
		return {
			bottom: '2%'
		}
	} else {
		return {
			top: (100 / (length - 1)) * index + '%',
			transform: 'translate(-50%, -50%)'
		}
	}
	return {}
})

</script>

<style scoped lang="scss">
.swiper-scrollbar {
	height: 100%;
	width: 4rpx;
	position: absolute;
	top: 0;
	right: 0;
	.swiper-scrollbar-track {
		position: absolute;
		width: 2rpx;
		background: #B5BAB4;
		top: 0;
		bottom: 0;
		transform: translateX(-50%);
	}
	.swiper-scrollbar-thumb {
		position: absolute;
		width: 4px;
		height: 14px;
		background: #384959;
		border-radius: 20px 20px 20px 20px;
		transform: translateX(-50%);
	}
}
</style>